Skip to content

Hero redesign - #552

Merged
Blaumaus merged 9 commits into
mainfrom
improvement/hero-redesign
May 26, 2026
Merged

Hero redesign#552
Blaumaus merged 9 commits into
mainfrom
improvement/hero-redesign

Conversation

@Blaumaus

@Blaumaus Blaumaus commented May 25, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

Changes

If applicable, please describe what changes were made in this pull request.

Community Edition support

  • Your feature is implemented for the Swetrix Community Edition
  • This PR only updates the Cloud (Enterprise) Edition code (e.g. Paddle webhooks, blog, payouts, etc.)

Database migrations

  • Clickhouse / MySQL migrations added for this PR
  • No table schemas changed in this PR

Documentation

  • You have updated the documentation according to your PR
  • This PR did not change any publicly documented endpoints

Summary by CodeRabbit

  • New Features

    • A/B test for landing hero variants
    • Header supports optional inverted (light-on-dark) styling
    • Logo cloud now supports selectable variants

  • Improvements

    • Hero copy updated; “Live demo” renamed to “View live demo”; added “Real-time dashboard” benefit
    • Live-demo preview and marketing sections refreshed (visuals, layout, iconography, minor text color tweaks)
    • Analytics URL/path normalization improved

  • Chores

    • Project config adjusted for dependency checks

Review Change Stack

@Blaumaus Blaumaus self-assigned this May 25, 2026
@coderabbitai

coderabbitai Bot commented May 25, 2026 •
edited
Loading

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6bc21639-698e-40e7-824d-4ee79373969f

📥 Commits

Reviewing files that changed from the base of the PR and between 41fb307 and a58afe4.

📒 Files selected for processing (1)
  • web/app/utils/renderCtaHtml.ts
📝 Walkthrough

Walkthrough

Adds a landing-page A/B experiment picking a hero variant in the loader and routing rendering accordingly; converts LogoCloud to a variant-controlled component; threads optional inverted styling through Header and subcomponents; refactors CTA HTML rendering; updates marketing styling, analytics patterns, knip config, and English copy.

Changes

Landing Page Hero A/B Experiment with Component Styling

Layer / File(s) Summary
Header component inverted styling support
web/app/components/Header/index.tsx		 HeaderProps adds inverted?: boolean. Header forwards inverted to AuthedHeader/NotAuthedHeader; SolutionsMenu, ProfileMenu, Separator, and CommunityLinks accept inverted and conditionally adjust classNames (text, links, buttons, focus rings) via cn() to support inverted rendering.
LogoCloud variant system for responsive asset selection
web/app/components/marketing/LogoCloud.tsx		 LogoCloud gains `variant?: 'old'
Landing page hero A/B experiment and variant routing
web/app/routes/_index.tsx		 Loader now calls getExperimentVariant and returns landingHeroVariant. Hero({variant}) selects NewHero (redesigned background, Button CTAs, NewLiveDemoPreview with eager iframe) or OldHero (OldLiveDemoPreview). Index reads and forwards the variant to Hero and LogoCloud.
FeaturesGrid, DitchGoogle, and testimonial styling updates
web/app/components/marketing/FeaturesGrid.tsx, web/app/components/marketing/DitchGoogle.tsx, web/app/routes/_index.tsx		 FeaturesGrid label/header/separator colors switched from muted to secondary; dark-mode bar overlay opacity increased. Testimonials updated to secondary. DitchGoogle layout and CTA restyled; trust list rendered from TRUST_KEYS using CheckCircleIcon.
Unified CTA HTML renderer
web/app/utils/renderCtaHtml.ts		 Introduces renderForestCtaHtml(ForestCtaOptions) and updates renderTimeToSwitchCta/renderDitchGoogleCta to use the shared helper; updates SVG constants used in CTA HTML.
UI copy updates for hero and benefits
web/public/locales/en.json		 common.liveDemo → "View live demo"; hero description replaced with privacy-first/cookieless wording; main.heroBenefits adds realTimeDashboard.

Analytics and configuration updates

Layer / File(s) Summary
Analytics URL normalization patterns
web/app/utils/analytics.ts		 Expanded/anchored regexes in REFS_TO_IGNORE and PATHS_REPLACEMENT_MAP to allow optional extra path segments before recognized routes while preserving replacement outputs (e.g., canonical /projects/[id], /verify/[token], etc.).
Knip configuration adjustments
web/knip.jsonc		 Comments added to previously ignored entries (@swetrix/node in ignoreDependencies and ./app/utils/analytics.server.ts in ignore) so Knip will re-evaluate those files/deps.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Swetrix/swetrix#499: Overlaps with FeaturesGrid color changes and some Header edits.
  • Swetrix/swetrix#543: Touches Header/ProfileMenu wiring (feedback/modal) in the same components updated here.
  • Swetrix/swetrix#527: Related backend experiment/evaluation changes affecting getExperimentVariant used by this PR.

Poem

🐰 I hopped through headers, flipped the night and day,
Logos learnt their variants and chose the perfect way,
Heroes split in two—old paths and something new,
CTAs sang in unison and analytics got its cue,
A tiny rabbit cheers: merge the brighter view!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ❓ Inconclusive The description follows the template structure with all required sections addressed. However, the 'Changes' section is empty, leaving the technical details of the redesign undocumented despite significant changes across multiple files and components. Fill in the 'Changes' section with a detailed summary of the hero redesign work, including A/B experiment setup, new hero variant, updated components, and styling changes.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: a redesign of the hero section. It is concise, clear, and directly reflects the primary objective evident in the changeset (new hero variants, updated layouts, and visual tweaks across landing page components).
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch improvement/hero-redesign

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Blaumaus
Blaumaus marked this pull request as ready for review May 26, 2026 00:39
@Blaumaus
Blaumaus merged commit 0b27cae into main May 26, 2026
10 checks passed
This was referenced Jun 13, 2026
Merged
Merged
Merged
@coderabbitai coderabbitai Bot mentioned this pull request Jul 27, 2026
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@Blaumaus Blaumaus

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Blaumaus